<template>
	<yd-layout>
		<yd-navbar
			slot="navbar"
			title
			style="height:1rem"
			class="in_serch"
		>
			<router-link
				to="#"
				slot="center"
			>
				<yd-search
					v-model="value1"
					:on-submit="submitHandler"
				></yd-search>
			</router-link>
		</yd-navbar>
		<div class="conter">
			<div
				style="height:2rem;"
				class="xx"
			>
			</div>
			<div
				style="height:2rem;"
				class="xxx"
			>
				<div class="xxxs">
					<yd-slider
						autoplay="3000"
						v-if="banners.length>1"
					>
						<yd-slider-item
							v-for="(item,index) in banners"
							:key="index"
						>
							<a href="javascript:void(0);">
								<img :src="item">
							</a>
						</yd-slider-item>
					</yd-slider>
					<a
						href="javascript:void(0);"
						v-else
					>
						<img :src="banners[0]">
					</a>
				</div>
			</div>
			<!-- 快捷方式 -->
			<home-shortcut></home-shortcut>
			<div style="background:#fff;padding:0.1rem 0rem">
				<div class="rs">
					<span class="youxuan">优选门店</span>
					<span class="youxuan-label">官方直连/大牌直营</span>
					<span
						class="huanyihuan"
						@click="get_optimizations_business"
					>换一换</span>
				</div>
				<div class="rsa">
					<!-- 优选商家 -->
					<div class="rsb">
						<optimization-store
							:optimization="item"
							v-for="(item,index) in optimizations.content"
							:key="index"
						></optimization-store>
					</div>
				</div>
			</div>
			<div style="background:#fff;padding:0.1rem 0rem">
				<div class="rs">
					<span style="font-size:0.35rem;padding-left:0.2rem">门店列表</span>
					<span style="font-size:0.25rem;color:#999;padding-left:0.2rem">积分活动</span>
				</div>
				<yd-infinitescroll
					:distance="20"
					:callback="get_stores_list"
					ref="stores"
				>
					<div
						class="conten"
						slot="list"
					>
						<ordinary-store
							:store="item"
							v-for="(item,index) in  stores.contents"
							:key="index"
						></ordinary-store>
					</div>
					<span slot="doneTip">没有更多了</span>
				</yd-infinitescroll>
			</div>
		</div>
	</yd-layout>
</template>

<script>
import homeShortcut from "@/components/home_shortcut/index";
import optimizationStore from "@/components/business/optimization_store";
import ordinaryStore from "@/components/business/ordinary_store";
export default {
	name: "HomeNew",
	data () {
		return {
			value1: "",
			banners: [],
			optimizations: {
				page_size: 5,
				page_index: 1,
				content: []
			},
			page_size: 10,
			stores: {
				page_index: 1,
				contents: [
				]
			}
		};
	},
	components: {
		homeShortcut,
		optimizationStore,
		ordinaryStore
	},
	mounted () {
		this.get_optimizations_business();
		this.get_stores_list();
		this.get_banners()
	},
	methods: {
		submitHandler () {
			console.log(1);
		},
		/*
		 * 获取优选商家
		 * 作者：gzt
		 * 时间：2019-11-28 08:31:16
		 */
		get_optimizations_business () {
			let _this = this;
			this.$post(this.$api.organizeteam.get_optimizations_business, {
				pageSize: this.optimizations.page_size,
				pageNum: this.optimizations.page_index
			}).then(res => {
				if (res.success) {
					_this.optimizations.content = [...res.data.result];

					if (_this.optimizations.page_index == res.totalPages) {
						_this.optimizations.page_index = 1;
					} else {
						_this.optimizations.page_index++;
					}
				}
			});
		},
		/*
		* 获取普通商家列表
		* 作者：gzt
		* 时间：2019-11-28 20:05:02
		*/
		get_stores_list () {
			let _this = this
			this.$post(this.$api.organizeteam.get_business_list, {
				pageSize: this.page_size,
				pageNum: this.stores.page_index,
				request: {
					sort: 'SCORE_DESC'
				}
			}).then(res => {
				if (res.success) {
					_this.stores.contents = [..._this.stores.contents, ...res.data.result]
					if (res.data.result.length < this.page_size) {
						/* 所有数据加载完毕 */
						_this.$refs.stores.$emit("ydui.infinitescroll.loadedDone");
						return;
					}
					/* 单次请求数据完毕 */
					_this.$refs.stores.$emit("ydui.infinitescroll.finishLoad");

					_this.stores.page_index++;
				}
			}).catch(error => {
				console.log(error);
			})
		},

		/*
		* 轮播图
		* 作者：gzt
		* 时间：2019-11-30 12:34:26
		*/
		get_banners () {
			let _this = this
			this.$post(this.$api.organizeteam.rotation_chart, {
				bannerType: 1
			})
				.then(res => {
					if (res.success) {
						for (let img of res.data) {
							_this.banners.push(img.url)
						}
					}
				});
		}
	}
};
</script>
<style>
.youxuan {
	font-size: 0.35rem;
	padding-left: 0.2rem;
}
.youxuan-label {
	font-size: 0.25rem;
	color: #999;
	padding-left: 0.2rem;
}
.huanyihuan {
	font-size: 0.25rem;
	color: #999;
	padding-left: 0.2rem;
	flex: 1;
	text-align: right;
	padding-right: 0.5rem;
}
.in_serch {
	align-items: center;
	background: url(../../static/home/1.png);
}

.yd-search-input {
	width: 7.2rem;
	padding: 0px;
	border-radius: 20px;
}

.yd-search-input > .search-input {
	margin-right: 0px;
}

.yd-search-input > .search-input {
	border-radius: 20px;
}

.yd-search-input:after,
.yd-search-input:before {
	height: 0px;
}

.yd-search-input:after,
.yd-search-input:before {
	height: 0px;
}

.yd-navbar:after {
	height: 0px;
}

.xx {
	background: url(../../static/home/1.png);
	padding: 0.25rem;
}
.xxxs {
	position: absolute;
	top: 0;
	padding: 0.25rem;
}
.xxxs img {
	width: 100%;
}

.yd-grids-icon img {
	height: 0.9rem;
}

.yd-grids-4 {
	padding: 0.3rem 0.3rem 0rem 0.3rem;
}

.yd-grids-item {
	padding: 0.1rem 0;
}

.yd-grids-item:after {
	height: 0px;
}

.yd-grids-4 .yd-grids-item:not(:nth-child(4n)):before {
	height: 0px;
}

.yd-grids-item:after {
	height: 0px;
}

.yd-grids-4:before {
	height: 0px;
}

.yd-grids-txt {
	padding: 0.25rem 0.2rem;
}

.rs {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0.2rem 0.35rem;
}

.rs img {
	height: 0.35rem;
}

.rs_item {
	display: flex;
	margin-right: 0.3rem;
	flex-direction: column;
	align-items: flex-start;
}

.rs_item img {
	height: 2.2rem;
	width: 2.2rem;
	border-radius: 4px;
}

.rsa {
	overflow: auto;
	margin: 0.1rem 0.35rem 0.2rem;
	overflow-y: hidden;
}

.rsb {
	display: flex;
	justify-content: flex-start;
}

.a {
	width: 1.1rem;
	border: 1px solid red;
	color: red;
	font-size: 0.2rem;
	padding: 0rem 0.15rem;
	border-radius: 2px;
	margin-top: 0.05rem;
}

.b {
	margin-top: 0.2rem;
}

.title1 {
	font-size: 0.28rem;
	color: #8a8989;
	font-weight: bold;
	text-overflow: ellipsis;
}

.jg {
	padding-right: 0.15rem;
	font-size: 0.3rem;
	color: red;
}

.yj {
	text-decoration: line-through;
	color: #8a8989;
}

.tuijian {
	padding: 0.1rem 0.35rem;
	border-bottom: 1px solid #f5f5f5;
}

.jg_item {
	display: flex;
	height: 3rem;
	padding: 0.2rem 0;
	align-items: center;
}

.jg_img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 4px;
}

.jg_img img {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 8px;
}

.jg_wz {
	display: flex;
	text-align: left;
	padding: 0 0.3rem;
	flex: 1;
	flex-direction: column;
}

.title1 {
	font-size: 0.3rem;
	font-weight: bold;
	text-overflow: ellipsis;
}

.title_info {
	color: #575656;
}

.montry {
	padding: 0.05rem 0;
	font-size: 0.25rem;
	color: #8a8989;
}
.ay {
	display: flex;
	justify-content: space-between;
}
.jg {
	padding-right: 0.15rem;
	font-size: 0.3rem;
	color: red;
}

.jua {
	background: #d71515;
	color: #ffffff;
	font-size: 0.2rem;
	padding: 0.01rem 0.15rem;
	border-radius: 2px;
}

.yj {
	text-decoration: line-through;
	color: #8a8989;
}
</style>
